<template>
  <page-body>
    <view class="page">
      <view class="flex benben-position-layout flex flex-wrap align-center home_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex flex-wrap align-center justify-between flex-sub home_fd0_0'>
          <view class='flex flex-wrap align-center home_fd0_0_c0'>
          </view>
          <view class='flex flex-wrap align-stretch justify-center'>
            <text class='home_fd0_0_c1_c0'>首页</text>
          </view>
          <view class='flex flex-wrap align-center justify-end home_fd0_0_c0'>
          </view>
        </view>

      </view>
      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout home_flex_1">
        <view class='flex flex-wrap align-center'>

          <view class='flex  home_fd1_0_c0'></view>

          <text class='home_fd1_0_c1'>经营报表</text>
        </view>
        <view class='flex flex-wrap align-center justify-between home_fd1_1'>
          <view class='flex flex-direction flex-wrap align-center justify-center home_fd1_1_c0'
            @tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/grzx/subscribeList/subscribeList`">
            <text class='home_fd1_1_c0_c0'>今日分配</text>
            <text class='home_fd1_1_c0_c1'>{{messNum.today_count}}</text>
          </view>
          <view class='flex flex-direction flex-wrap align-center justify-center home_fd1_1_c0'
            @click.stop="goswitch('1')">
            <text class='home_fd1_1_c0_c0'>意向客户</text>
            <text class='home_fd1_1_c0_c1'>{{messNum.yixiang_count}}</text>
          </view>
          <view class='flex flex-direction flex-wrap align-center justify-center home_fd1_1_c0'
            @click.stop="goswitch('3')">
            <text class='home_fd1_1_c0_c0'>跟进中客户</text>
            <text class='home_fd1_1_c0_c1'>{{messNum.genjin_count}}</text>
          </view>
          <view class='flex flex-direction flex-wrap align-center justify-center home_fd1_1_c0'
            @click.stop="goswitch('2')">
            <text class='home_fd1_1_c0_c0'>成交客户</text>
            <text class='home_fd1_1_c0_c1'>{{messNum.chenjiao_count}}</text>
          </view>
        </view>
        <view class='flex flex-wrap align-center' style="margin:0 auto;">
          <!-- <benben-calendar-diy mode='range' year-arrow-color='#666666' month-arrow-color='#666666' start-text='开始'
            end-text='结束' :change-title='true' :change-year='true' :change-month='true'
            class=" home_fd1_2_c0"></benben-calendar-diy> -->
          <uni-calendar class="uni-calendar--hook" :selected="info.selected" :showMonth="false" @change="change"
            @monthSwitch="monthSwitch" />
        </view>
        <view class='flex flex-direction align-stretch home_fd1_3'>
          <view class='flex flex-wrap align-center justify-between flex-sub'>
            <text>周年提醒</text>
            <view class='flex flex-wrap align-center justify-center home_fd1_3_c0_c1'
              @click.stop="pickerDiy1719214642615=true">
              <text>{{riqi || '请选择'}}</text>
              <image class='home_fd1_3_c0_c1_c1' mode="aspectFit" :src='STATIC_URL+"161.png"'></image>
            </view>
          </view>
          <view class='flex flex-wrap align-center justify-between home_fd1_1'>
            <view class='flex flex-direction flex-wrap align-center justify-center ' @click.stop="chooseYear(item)"
              v-for="(item,index) in cateList" :key="index"
              :class="item.value==customer_type? 'home_fd1_3_c1_c0' : 'home_fd1_3_c1_c1'">
              <text class=''
                :class="item.value==customer_type? 'home_fd1_1_c0_c0' : 'home_fd1_3_c1_c1_c0'">{{item.name}}({{item.count}})</text>
            </view>
            <!-- <view class='flex flex-direction flex-wrap align-center justify-center '>
              <text class='home_fd1_3_c1_c1_c0'>婚礼周年(1)</text>
            </view>
            <view class='flex flex-direction flex-wrap align-center justify-center home_fd1_3_c1_c1'>
              <text class='home_fd1_3_c1_c1_c0'>婚礼周年(1)</text>
            </view> -->
          </view>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <!--选择器开始 -->
      <!-- <benben-picker ref="benbenWritePickerCodepicker2" :visible.sync="pickerDiy1719214642615" :value.sync='riqi'
        mode='date' :picker-height='88' :current='true' :mask-show='true' :timeout='true' start-year='1960-1-1'
        end-year='2050-12-31'>
        <template #picker-header>
          <view class='flex flex-wrap align-center justify-between home_picker2_0'>
            <text @tap="$refs.benbenWritePickerCodepicker2.cancel()">取消</text>
            <text>选择</text>
            <text class='home_picker2_0_c2' @tap.stop="serchConfirm">确认</text>
          </view>
        </template>
      </benben-picker> -->
      <benben-picker ref="benbenWritePickerCodepicker2" :visible.sync="pickerDiy1719214642615" :value.sync='riqi'
        mode='date' :picker-height='88' :current='true' :mask-show='true' fields='day' :timeout='true'
        start-year='1990-01-01' end-year='2050-12-31'>
        <template #picker-header>
          <view class='flex flex-wrap align-center justify-between home_picker2_0'>
            <text class='personalData_picker3_0_c0' @tap="$refs.benbenWritePickerCodepicker2.cancel()">取消</text>
            <text class='personalData_picker3_0_c1'>选择日期</text>
            <!-- <text class='home_picker2_0_c2' @tap="$refs.benbenWritePickerCodepicker2.pickerConfirm()">确定</text> -->
            <text class='home_picker2_0_c2' @tap="serchConfirm">确定</text>
          </view>
        </template>
      </benben-picker>
      <!--选择器结束 -->
      <!---flex布局flex布局开始-->
      <template v-for='(item,flex3) in dataList'>
        <view class="flex flex-direction align-stretch benben-flex-layout home_flex_3" :key='flex3'>
          <view class='flex flex-wrap align-center justify-between home_fd3_0'>
            <image class='home_fd3_0_c0' mode="aspectFit" :src='STATIC_URL+"151.png"'></image>
            <view class='flex flex-direction align-stretch flex-sub home_fd3_0_c1'>
              <view class='flex flex-wrap align-center home_fd3_0_c1'>
                <text>{{item.customer_name}}</text>
                <image class='home_fd3_0_c1_c0_c1' mode="aspectFit" v-if="item.customer_types==3"
                  :src='STATIC_URL+"155.png"'></image>
                <image class='home_fd3_0_c1_c0_c1' mode="aspectFit" v-if="item.customer_types==1"
                  :src='STATIC_URL+"152.png"'></image>
                <image class='home_fd3_0_c1_c0_c1' mode="aspectFit" v-if="item.customer_types==2"
                  :src='STATIC_URL+"153.png"'></image>
                <image class='home_fd3_0_c1_c0_c1' mode="aspectFit" v-if="item.customer_types==4"
                  :src='STATIC_URL+"162.png"'></image>
              </view>
              <view class='flex flex-wrap align-center home_fd3_0_c1_c1'>
                <text>{{item.customer_phone}}</text>
              </view>
            </view>
          </view>
          <view class='flex flex-wrap align-end home_fd3_1'>
            <text class='home_fd3_1_c0'>{{item.customer_type_name}} <text
                class="margin-lr-xs text-333">{{item.year_number}}</text> 周年</text>
            <text class='home_fd3_1_c1'>{{item.date_time}}</text>
          </view>
        </view>
      </template>
      <fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData"
        :listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
      <!---flex布局flex布局结束-->

    </view>
  </page-body>
</template>
<script>
  function getDate(date, AddDayCount = 0) {
    if (!date) {
      date = new Date()
    }
    if (typeof date !== 'object') {
      date = date.replace(/-/g, '/')
    }
    const dd = new Date(date)

    dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期

    const y = dd.getFullYear()
    const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
    const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
    return {
      fullDate: y + '-' + m + '-' + d,
      year: y,
      month: m,
      date: d,
      day: dd.getDay()
    }
  }
  import pagingList from '@/common/mixin/paging_list.js';
  export default {
    components: {},
    mixins: [pagingList],

    data() {
      return {
        "pickerDiy1719214642615": false,
        "riqi": "",
        "minixPagingListsApi": "",
        "pageingListApiMethod": "",
        "allowOnloadGetList": false,
        "dataList": [],
        cateList: '',
        customer_type: '',
        messNum: {
          chenjiao_count: 0,
          genjin_count: 0,
          today_count: 0,
          yixiang_count: 0
        },

        info: {
          lunar: true,
          range: true,
          insert: false,
          selected: []
        }
      };
    },
    computed: {
      isLogin() {
        return this.$store.state.token == '' ? false : true;
      }
    },
    watch: {},
    onLoad(options) {

    },
    onUnload() {

    },
    onReady() {
      this.getRead()
      console.log('this.info', this.info)
    },
    onShow() {
      // let month = getDate(new Date().fullDate).month
      // let year = getDate(new Date().fullDate).year
      // let day = getDate(new Date().fullDate).day
      // if (global.appTabBarType) this.toHomeDiy()

      this.riqi = getDate(new Date().fullDate).fullDate
      console.log('getDate(new Date().fullDate)', this.riqi)
      if (this.isLogin) {
        this.getData()
      } else {
        this.$urouter.reLaunch(`/pages/tabBar/loginPage/loginPage`);
      }


    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {
      this.getRead()
    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      goswitch(type) {
        uni.setStorageSync('intoType', 'shouye')
        uni.setStorageSync('tab2', type)
        uni.switchTab({
          url: `/pages/tabBar/customers/customers`
        })
      },
      change(e) {
        // uni.navigateTo({
        //   url: `/pages/tabBar/home/homeNext?riqi=${e.fulldate}`
        //   // url: `/pages/grzx/subscribeList/subscribeList?riqi=${e.fulldate}`
        // })
        // return;
        let isJump = this.info.selected.filter(item => item.date == e.fulldate)
        console.log('pppppp', isJump)
        if (isJump.length) {
          uni.navigateTo({
            url: `/pages/tabBar/home/homeNext?riqi=${e.fulldate}`
            // url: `/pages/grzx/subscribeList/subscribeList?riqi=${e.fulldate}`
          })
        }

      },
      monthSwitch(e) {
        console.log('monthSwitchs 返回:', e)
        let month = e.month
        let year = e.year
        this.$api.post(global.apiUrls.post6687a05a254fb, {
          year: year,
          mouth: month
        }).then(res => {
          if (res.data.code == 1) {
            this.info.selected = res.data.data
            console.log('this.info', this.info)
          }
        })
      },

      chooseYear(item) {
        this.customer_type = item.value
        this.getListFunc()
      },
      getRead() {
        let month = getDate(new Date().fullDate).month
        let year = getDate(new Date().fullDate).year
        this.$api.post(global.apiUrls.post6687a05a254fb, {
          year: year,
          mouth: month
        }).then(res => {
          uni.stopPullDownRefresh()
          if (res.data.code == 1) {
            this.info.selected = res.data.data
            console.log('this.info', this.info)
          }
        })
      },
      getData() {

        let month = getDate(new Date().fullDate).month
        let year = getDate(new Date().fullDate).year
        let day = getDate(new Date().fullDate).date
        this.$api.post(global.apiUrls.post666d3f575c605).then(res => {
          if (res.data.code == 1) {
            this.messNum = res.data.data
          }
        })
        this.$api.post(global.apiUrls.post666d4980707ff, {
          day: day,
          year: year,
          mouth: month
        }).then(res => {
          if (res.data.code == 1) {
            this.cateList = res.data.data
            this.customer_type = res.data.data[0].value
            this.getListFunc()
          }
        })
      },
      getData1() {
        let month1 = this.riqi.split('-')[1]
        let year1 = this.riqi.split('-')[0]
        let day1 = this.riqi.split('-')[2]
        console.log('ppp', year1)
        this.$api.post(global.apiUrls.post666d4980707ff, {
          day: day1,
          year: year1,
          mouth: month1
        }).then(res => {
          if (res.data.code == 1) {
            this.cateList = res.data.data
            this.customer_type = res.data.data[0].value
            this.getListFunc()
          }
        })
      },
      serchConfirm() {
        this.$refs.benbenWritePickerCodepicker2.pickerConfirm()
        setTimeout(res => {
          this.getData1()
        }, 500)
      },
      getListFunc() {
        this.minixPagingListsApi = global.apiUrls.post666d4472a0d18;
        this.pageingListApiMethod = 'post';
        this.allowOnloadGetList = false;
        this.pagingListPostDataContent = {
          time: this.riqi,
          customer_type: this.customer_type
        }
        this.listData = [];
        this.dataList = this.listData;
        this.pagingListToggle();

      },
      pagingListPostData() {
        return this.pagingListPostDataContent
      },
    }
  };
</script>
<style lang="scss" scoped>
  .uni-calendar--hook {
    border-radius: 16rpx;

  }

  .example-body {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
  }

  .calendar-button {
    flex: 1;
    font-weight: bold;
    font-size: 32rpx;
  }

  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: rgba(255, 248, 238, 1);
    background-size: 100% auto;
  }

  .home_flex_0 {
    background: #fff;
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .home_fd0_0_c1_c0 {
    font-size: 36rpx;
    font-weight: 700;
    color: #333333;
    line-height: 50rpx;
  }

  .home_fd0_0_c0 {
    width: 120rpx;
  }

  .home_fd0_0 {
    padding: 0rpx 32rpx 0rpx 32rpx;
  }

  .home_flex_1 {
    padding: 24rpx 24rpx 0rpx 24rpx;
  }

  .home_fd1_3_c1_c1_c0 {
    font-size: 24rpx;
    color: var(--benbenFontColor0);
  }

  .home_fd1_3_c1_c1 {
    background: rgba(228, 195, 145, 0.3);
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    width: 192rpx;
    height: 72rpx;
  }

  .home_fd1_3_c1_c0 {
    background: #E4C391;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    width: 192rpx;
    height: 72rpx;
  }

  .home_fd1_3_c0_c1_c1 {
    width: 26rpx;
    height: 14rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: 0rpx 0rpx 0rpx 24rpx;
  }

  .home_fd1_3_c0_c1 {
    background: #F8F8F8;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    width: 240rpx;
    height: 56rpx;
  }

  .home_fd1_3 {
    background: var(--benbenbgColor1);
    border-radius: 16rpx;
    background-size: 100% auto;
    margin: 24rpx 0rpx 24rpx 0rpx;
    padding: 24rpx;
  }

  .home_fd1_2_c0 {
    background: #ffffff;
    width: 686rpx;
    --range-bg-color: rgba(41, 121, 255, 0.13);
    --active-bg-color: rgba(41, 121, 255, 1);
    border-radius: 16rpx;
  }

  .home_fd1_1_c0_c1 {
    margin: 16rpx 0rpx 0rpx 0rpx;
  }

  .home_fd1_1_c0_c0 {
    font-size: 24rpx;
  }

  .home_fd1_1_c0 {
    background: #E4C391;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    width: 154rpx;
    height: 115rpx;
  }

  .home_fd1_1 {
    font-size: 32rpx;
    color: var(--benbenFontColor3);
    margin: 32rpx 0rpx 24rpx 0rpx;
  }

  .home_fd1_0_c1 {
    margin: 0rpx 0rpx 0rpx 16rpx;
  }

  .home_fd1_0_c0 {
    background: rgba(228, 195, 145, 1);
    width: 7rpx;
    height: 28rpx;
    margin: 0rpx 10rpx 0rpx 10rpx;
    transform: scaleX(0.5);
  }

  .home_picker2_0_c2 {
    color: rgba(211, 152, 80, 1);
  }

  .home_picker2_0 {
    border-bottom: 1px solid #eee;
    background: #fff;
    padding: 0rpx 32rpx 0rpx 32rpx;
    line-height: 88rpx;
    border-radius: 25rpx 25rpx 0rpx 0rpx;
    background-size: 100% auto !important;
  }

  .home_flex_3 {
    background: rgba(255, 255, 255, 1);
    margin: 26rpx 24rpx 0rpx 24rpx;
    padding: 24rpx;
    border-radius: 26rpx;
    background-size: 100% auto;
  }

  .home_fd3_1_c1 {
    margin: 0rpx 0rpx 0rpx 24rpx;
  }

  .home_fd3_1_c0 {
    color: rgba(170, 170, 170, 1);
  }

  .home_fd3_1 {
    padding: 24rpx 0rpx 24rpx 0rpx;
    font-size: 32rpx;
  }

  .home_fd3_0_c1_c1 {
    margin: 16rpx 0rpx 0rpx 0rpx;
  }

  .home_fd3_0_c1_c0_c1 {
    width: 115rpx;
    height: 34rpx;
    margin: 0rpx 0rpx 0rpx 16rpx;
  }

  .home_fd3_0_c1 {
    font-size: 32rpx;
    font-weight: 600;
  }

  .home_fd3_0_c0 {
    width: 62rpx;
    height: 67rpx;
    margin: 0rpx 24rpx 0rpx 0rpx;
  }

  .home_fd3_0 {
    border-bottom: 1px solid #eee;
    padding: 0rpx 0rpx 24rpx 0rpx;
  }
</style>
